﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    var num1 = [5, 4, 3, 2, 1];
    //var num2 = [10,9,8,7,6,5,4,3,2,1,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,];
    var num2 = [-1, -2, 4, 3, 2, 1,];
    var fmt = (v) => {
      if (!v && v != 0) {
        return "?";
      } else {
        return v;
      }
    };

    var ques = null;
    var his = null;
    var getHistory = () => {
      var temp = localStorage.getItem("history");
      if (temp) {
        his = JSON.parse(temp);
      } else {
        his = [];
        localStorage.setItem("history", JSON.stringify(his));
      }
      if (his[his.length - 1] && !his[his.length - 1].ansTime) {
        ques = his[his.length - 1];
      }
    };

    getHistory();
    console.log("ques", ques);

    class App extends React.Component {
      state = {
        count: 0,
        a1: "",
        b1: "",
        a2: "",
        b2: "",
      }
      getQuestion = null;
      a1 = null;
      b1 = null;
      a2 = null;
      b2 = null;
      printQuestion = (q) => {
        var { a1, b1, a2, b2 } = q;
        var out = [];
        if (a1 * a2 == 1) {
        } else {
          out.push(a1 * a2);
        }
        out.push(<>x<span style={{ verticalAlign: "top", fontSize: "12px" }}>2</span></>);
        if (a1 * b2 + a2 * b1 > 0) {
          out.push("+" + (a1 * b2 + a2 * b1) + "x");
        } else if (a1 * b2 + a2 * b1 < 0) {
          out.push((a1 * b2 + a2 * b1) + "x");
        }

        if (b1 * b2 > 0) {
          out.push("+" + (b1 * b2));
        } else if (b1 * b2 < 0) {
          out.push(b1 * b2);
        }
        return <>问题：[<span>{out}</span>] </>;
      };
      printAns = (q) => {
        var out = "";
        out += " 回答：";

        var a1 = fmt(q.ansa1) == 1 ? "" : fmt(q.ansa1);
        var a2 = fmt(q.ansa2) == 1 ? "" : fmt(q.ansa2);

        out += "(" + a1 + "x" + ((q.ansb1 >= 0) ? ("+" + fmt(q.ansb1)) : ("-" + fmt(-q.ansb1))) + ")";
        out += "(" + a2 + "x" + ((q.ansb2 >= 0) ? ("+" + fmt(q.ansb2)) : ("-" + fmt(-q.ansb2))) + ")";
        //out+="("+a2+"x+"+fmt(q.ansb2)+")";

        out += " ";

        out += "正确答案：";

        var a1 = q.a1 == 1 ? "" : q.a1;
        var a2 = q.a2 == 1 ? "" : q.a2;

        out += "(" + a1 + "x" + ((q.b1 >= 0) ? ("+" + fmt(q.b1)) : ("-" + fmt(-q.b1))) + ")";
        out += "(" + a2 + "x" + ((q.b2 >= 0) ? ("+" + fmt(q.b2)) : ("-" + fmt(-q.b2))) + ")";
        out += " ";

        return out;
      }
      doCheck() {
        if (ques) {
          ques.ansa1 = this.state.a1 == "" ? 1 : this.state.a1;
          ques.ansa2 = this.state.a2 == "" ? 1 : this.state.a2;
          ques.ansb1 = this.state.b1;
          ques.ansb2 = this.state.b2;
          if (
            ques.a1 == ques.ansa1 && ques.b1 == ques.ansb1 && ques.a2 == ques.ansa2 && ques.b2 == ques.ansb2 ||
            ques.a1 == ques.ansa2 && ques.b1 == ques.ansb2 && ques.a2 == ques.ansa1 && ques.b2 == ques.ansb1
          ) {
            ques.correct = true;
          } else {
            ques.correct = false;
          }

          ques.ansTime = new Date();
          localStorage.setItem("history", JSON.stringify(his));


          ques = null;

          getHistory();

          this.state.a1 = "";
          this.state.b1 = "";
          this.state.a2 = "";
          this.state.b2 = "";
          this.state.showAns = true;
          this.setState(this.state);
        }
      }
      render() {


        var correctTotal = 0;
        var list = his.map((item, index) => {
          var last = !item.ansTime && index == his.length - 1;
          var err = null;
          if (!last) {
            if (item.correct == true) {
              err = <><span style={{ backgroundColor: "lawngreen" }}>正确</span>，</>;
              correctTotal++;
            } else if (item.correct == false) {
              err = <><span style={{ backgroundColor: "red" }}>错误</span>，</>;
            } else {
              err = <><span style={{ backgroundColor: "grey" }}>未答</span>，</>;
            }
          }
          var d = new Date(item.time);
          return <div style={{ fontSize: "18px" }}>第{(index + 1)}题，{err}
            {item.ansTime && <>用时：{(Math.floor((new Date(item.ansTime) - new Date(item.time)) / 100) / 10)}秒</>}
            <span>{(d.getMonth() + 1)}月{d.getDate()}日{d.getHours()}点，</span>
            {this.printQuestion(item)}
            {last
              ? <>
                <div style={{ display: "inline-block", fontSize: "12px" }}>
                  =(<input style={{ width: "50px" }} ref={(ref) => { this.a1 = ref; }} value={this.state.a1} onChange={(e) => { this.state.a1 = e.target.value; this.setState(this.state); }} onKeyDown={(e) => { if (e.key == "Enter") { this.b1.focus(); } }}></input>
                  x+<input style={{ width: "50px" }} ref={(ref) => { this.b1 = ref; }} value={this.state.b1} onChange={(e) => { this.state.b1 = e.target.value; this.setState(this.state); }} onKeyDown={(e) => { if (e.key == "Enter") { this.a2.focus(); } }}></input>
                  )(<input style={{ width: "50px" }} ref={(ref) => { this.a2 = ref; }} value={this.state.a2} onChange={(e) => { this.state.a2 = e.target.value; this.setState(this.state); }} onKeyDown={(e) => { if (e.key == "Enter") { this.b2.focus(); } }}></input>
                  x+<input style={{ width: "50px" }} ref={(ref) => { this.b2 = ref; }} value={this.state.b2} onChange={(e) => { this.state.b2 = e.target.value; this.setState(this.state); }} onKeyDown={(e) => { if (e.key == "Enter") { this.doCheck(); this.getQuestion.focus(); } }}></input>)
                </div>
              </>
              : this.printAns(item)
            }
          </div>;
        });

        return (
          <div>
            <button style={{ marginRight: "10px", fontSize: "24px" }} ref={(ref) => { this.getQuestion = ref; }} onClick={() => {
              ques = { time: new Date(), ansb1: null, ansb2: null, ansTime: null };
              ques.a1 = num1[Math.floor(Math.random() * num1.length)];
              ques.b1 = num2[Math.floor(Math.random() * num2.length)];
              ques.a2 = num1[Math.floor(Math.random() * num1.length)];
              ques.b2 = num2[Math.floor(Math.random() * num2.length)];
              console.log(ques.a1 + "," + ques.b1 + "," + ques.a2 + "," + ques.b2);
              this.state.showAns = false;
              this.setState(this.state);
              setTimeout(() => {
                this.a1.focus();
              }, 10);
              his.push(ques);
              localStorage.setItem("history", JSON.stringify(his));
            }}>出题</button>
            <button style={{ marginRight: "10px", fontSize: "24px" }} onClick={() => {
              this.doCheck();
            }}>检查</button>

            <div id="domhistory">
              {list}
              <span>共{his.length}题，正确{correctTotal}题</span>
            </div>
            <button id="clear" onClick={() => {
              his = [];
              localStorage.setItem("history", JSON.stringify(his));
              getHistory();
              this.setState(this.state);
            }}>清除历史</button>

          </div>
        );
      }
    }





    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>

</html>